
import React, { useState } from 'react';
import { Select, Form, Button, Input, Modal } from 'antd';
import request from '@/utils/request';
import {
    PlusOutlined,
} from '@ant-design/icons';
import Categories from '@/pages/admin/categories';

const apiURL = "/api/services/app/Category/";
export interface CategoryProps {
    layout: string,
    width?: number,
    cRef?: any,
    name?: any,
    label?: any
}
const ZoneComponent: React.FC<CategoryProps> = (props: CategoryProps) => {
    const [visible, setVisible] = useState<boolean>(false);
    const [optionCountry, setOptionCountry] = useState<any[]>([]);
    const [optionState, setOptionState] = useState<any[]>([]);
    const [optionCity, setOptionCity] = useState<any[]>([]);
    const switchModal = () => {
        setVisible(!visible)
    }
    const handleCountryChange = (parent: string) => {
        var items = optionCountry.filter((o: any) => o.categoryIndex == parent)[0];
        setOptionState(items?.children)
    };
    const handleStateChange = (parent: string) => {
        var items = optionState.filter((o: any) => o.categoryIndex == parent)[0];
        setOptionCity(items?.children)
    };
    React.useEffect(() => {
        request(apiURL + 'GetTreeListAsync', {
            method: 'GET',
            params: { layout: props.layout }
        }).then((response) => {
            if (response) {
                if (response.success) {
                    setOptionCountry(response.result)
                }
            }
        });

    }, [])
    return (
        <>
            <Form.Item label={props.label} style={{ marginBottom: 0 }}>
                <Input.Group compact>
                    <Form.Item noStyle name={[props.name, 'country']}>
                        <Select
                            placeholder="国家" onChange={handleCountryChange}
                            style={{ width: props.width }}>
                            {
                                optionCountry?.map((item: any) => {
                                    return (<Select.Option value={item.categoryIndex} key={item.id}>
                                        {item.categoryName}</Select.Option>)
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item noStyle name={[props.name, 'state']}>
                        <Select
                            placeholder="省/州" onChange={handleStateChange}
                            style={{ width: props.width }}>
                            {
                                optionState?.map((item: any) => {
                                    return (<Select.Option value={item.categoryIndex} key={item.id}>
                                        {item.categoryName}</Select.Option>)
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item noStyle name={[props.name, 'city']}>
                        <Select
                            placeholder="城市"
                            style={{ width: props.width }}>
                            {
                                optionCity?.map((item: any) => {
                                    return (<Select.Option value={item.categoryIndex} key={item.id}>
                                        {item.categoryName}</Select.Option>)
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button icon={<PlusOutlined />} onClick={switchModal} />
                    </Form.Item>
                </Input.Group>
            </Form.Item>
            <Modal
                title={props.layout}
                visible={visible}
                destroyOnClose={true}
                onCancel={switchModal}
                footer={false}
            >
                <Categories layout={props.layout} size="small" />
            </Modal>
        </>
    )
}
export default ZoneComponent;